<script setup lang='ts'>
import { BlogType } from '@/models/blog';
import { useRouter } from 'vue-router';


interface blogLBlogCardListPropsst {
  blogList: BlogType[]
}
const props = withDefaults(defineProps<blogLBlogCardListPropsst>(),{
  blogList: []
})

const router = useRouter()
// 点击跳转
const toBlog = (id: number) => {
  router.push({
    path: '/blog/detail',
    query: {
      id
    }
  })
}
</script>
<template>
  <van-cell-group >
    <van-cell v-for="blog in props.blogList" @click="toBlog(blog.id)">
       <template #title>
        <van-text-ellipsis style="margin-left: 15px" :content="blog.title" rows="1"/>
      </template>
      <template #right-icon>
        <van-image
          class="img"
          v-if="blog.coverImage"
          width="80px"
          height="80px"
          :src="blog.coverImage"
        />
      </template>
      <template #value>
        <div class="icon">
          <van-icon name="envelop-o">
            <span style="margin-left: 2px">{{ blog.commentsNum }}</span>
          </van-icon>
          <van-icon v-if="!blog.isLike" name="like-o" style="margin-left: 5px;">
            <span style="margin-left: 2px">{{ blog.likedNum }}</span>
          </van-icon>
          <van-icon v-else name="like" style="margin-left: 5px;" color="#ee0a24">
            <span style="margin-left: 2px">{{ blog.likedNum }}</span>
          </van-icon>
        </div>
      </template>
      <template #label>
        <div class="label">
          <van-text-ellipsis style="width: 200px; size: 100px;":content="blog.content" rows="2"/>
          <span  class="createtime">{{ blog.createTime }}</span>
        </div>
      </template>
    </van-cell>
  </van-cell-group>
</template>
<style scoped >
.img{
  margin-right: 10px;
}
.icon{
  margin: 60px 10px 0 0
}
/* :deep(.van-cell__label) {
    margin-top: 38px;
} */
.label{
  margin-left: 15px;
  height: 50px;
}
.createtime{
  position: absolute;
  bottom: 10px;
}
:deep(.van-cell) {
    padding-left: 0;
    padding-right: 0;
}
</style>
